<template><!--积分排行榜-->
    <div class="warp-2" style="height:100%;padding-top: 56px;">
        <navbar :title="$t('rank_credits_title')">
            <template #right>
                <a class="word-title" slot="right" @click="JumpPointsMall()">{{ $t("rank_credits_integralmall") }}</a>
            </template>
        </navbar>
        <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
            <van-list
            v-model="isLoading"
            :finished="finished"
            :finished-text="(finished&&creditRankTotal>0) ? $t('no_more') : ''"
            loding-text="loading"
            @load="getCreditRankTotal"
            >
                <div>
                    <div class="module-box-06">
                        <div class="module-box-10">
                            <div class="box-table" v-if="userInfo">
                                <span class="box-table-cell user-pic-2" @click="JumpPersonal()"><img :src="appUrl + userInfo.userPoto"/></span>
                                <span class="box-table-cell num-06" v-if="creditDetail">{{ creditDetail.uct_total > 0 && creditDetail.rownum ? creditDetail.rownum : '--' }}</span>
                                <span class="box-table-cell num-06" v-if="!creditDetail">--</span>
                                <span class="box-table-cell font-size16 box-08" style="padding: 4px 0 5px;" @click="JumpPersonal()">{{ userInfo.usrDisplayBil }}</span>
                                <router-link tag="div" :to="'/totalPoints/' + encId" class="box-table-cell box-09">
                                    <p class="font-size16" style="padding: 0 0 5px;" v-if="creditDetail">{{ creditDetail.uct_total }}</p>
                                    <p class="font-size16" style="padding: 0 0 5px;" v-if="!creditDetail">--</p>
                                    <span class="font-size12">{{ $t("personal_activity_credits") }}</span>&nbsp;&nbsp;<span class="font-size10">>></span><!--总积分-->
                                </router-link>
                            </div>
                        </div>
                        <p class="font-size12" v-if="creditDetail.uct_update_timestamp">{{ $t("last_update_time") }}：{{ creditDetail.uct_update_timestamp | substringTime }}</p><!--上次更新时间-->
                        <p class="font-size12" v-if="!creditDetail.uct_update_timestamp">{{ $t("last_update_time") }}：--</p><!--上次更新时间-->
                    </div>
                    <div class="module-box-07 white-bg bottom-shadow">
                        <ul>
                            <router-link tag="li" v-for="(creditRank, index) in creditRankList" :key="index" :to="'/personal/' + cwnEncrypt(creditRank.uctEntId)">
                                <div class="box-table">
                                    <span class="num-07 box-table-cell">{{ creditRank.uctTotal > 0 ? index + 1 : '--' }}</span>
                                    <span class="user-pic-3 box-table-cell">
                                        <img :src="appUrl + creditRank.user.urxExtra43" alt="" style="display: inline-block;"/>
                                    </span>
                                    <div class="box-table-cell box-08" style="padding: 0 0 0 15px;">
                                        <p class="font-size16" style="margin-bottom: 3px">{{ creditRank.user.usrDisplayBil }}<i :class="{ 'first-place-icon':index + 1 == 1, 'second-place-icon':index + 1 == 2, 'third-place-icon':index + 1 == 3 }" style="margin-bottom: -2px;"></i></p>
                                        <p class="font-size12 color666">{{ creditRank.uctTotal }} {{ creditRank.uctTotal > 1 ? $t("credits_point_num_2") : $t("credits_point_num") }}</p><!--总积分-->
                                    </div>
                                </div>
                            </router-link>
                        </ul>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin.js';
import {cwnEncrypt, cwnDecrypt} from '@/utils/tools';
export default {
    name: 'PointsLeaderboard',
    mixins: [mixin],
    data() {
        return {
            pageNo: 1, //分页页码
            encId: '', //获取用户id
            userInfo: '', //用户信息
            creditDetail: {}, //我的积分信息
            creditRankList: [], //积分排行
            creditRankTotal: 0, //积分排行总数
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        ...{ cwnEncrypt, cwnDecrypt },
        init() {
            this.getCreditRankTotal();
            //获取用户id
            this.encId = this.$route.params.encId;
            let entId = this.wbDecryption(this.encId);
            //用户信息
            this.$axios({
                method: 'GET',
                // url: '/app/personal/home/json/' + this.$route.params.encId
                url: `/app/api/trainee/my/detail`
            }).then(res => {
                this.userInfo = res.data;
            });
            //我的积分信息
            // this.$axios({
            //     method: 'POST',
            //     url: '/app/rank/my_credit',
            //     params: {
            //         pageNo: '1',
            //         pageSize: 10
            //     }
            // }).then((res) => {
            //     this.creditDetail = res.data.my_credit_detail;
            // });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getCreditRankTotal('refresh');
                this.isRefresh = false;
            }, 900);
        },
        getCreditRankTotal(option) {
            //积分排行
            this.$axios({
                method: 'GET',
                // url: '/app/rank/credit_rank',
                url: `/app/fame/credit`,
                params: {
                    // pageNo: this.pageNo,
                    pageSize: 100
                }
            }).then((res) => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.creditRankList = res.data.results;
                    } else {
                        this.creditRankList = [...this.creditRankList, ...res.data.results];
                    }
                }
                this.creditRankTotal = res.data.totalRecord;
                this.finished = true;
                this.isLoading = false;
            });
        },
        JumpPointsMall() {
            let encId = this.encId;
            this.$router.push({path: '/mall/list', query: {encId}});
        },
        JumpPersonal() {
            let encId = this.encId;
            this.$router.push({path: `/personal/${this.cwnEncrypt(encId)}`});
        }
    },
    mounted() {
        this.$store.commit('addKeepAliveList', 'PointsLeaderboard');
        this.init();
    }
};
</script>

<style scoped>
</style>
